﻿var timeplot;
var resizeTimerID = null;

function ResizePlot() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            timeplot.repaint();
        }, 100);
    }
}
function DrawPlot() {
    var plotCount;
    
    var data = GetDataFromTable();
    var eventSource = new Timeplot.DefaultEventSource();
    var timeGeometry = new Timeplot.DefaultTimeGeometry({
        gridColor: new Timeplot.Color("#000000"),
        axisLabelsPlacement: "bottom"
    });
    var valueGeometry = new Timeplot.DefaultValueGeometry({
        gridColor: "#000000",
        min: 0,
        max: 100
    });
    var colors = ['red', 'green', 'blue', 'yellow', 'cyan', 'purple', 'orange', 'lime'];
    var plotInfo = new Array();
    plotCount = data[0].value.length;
    ApplyColorCodingToTableCells(plotCount, colors);
    for (var i = 0; i < plotCount; i++) {
        plotInfo[i] = Timeplot.createPlotInfo({
            id: 'plot' + i,
            dataSource: new Timeplot.ColumnSource(eventSource, i + 1),
            timeGeometry: timeGeometry,
            valueGeometry: valueGeometry,
            lineColor: colors[(i) % (colors.length)],
            showValues: true
        });
    }
    timeplot = Timeplot.create(document.getElementById("my-timeplot"), plotInfo);
    timeplot.loadArray(data, eventSource);
}

function GetDataFromTable() {
    var data = new Array();
    $('#tableId tr').each(
                function(rowIndex) {
                    var row = { date: null, value: new Array() };
                    $.each($(this).find('th').get(), function(i) { row.date = $(this).text(); });
                    $.each($(this).find('td').get(), function(i) { row.value[i] = $(this).text(); });
                    data[rowIndex] = row;
                }
            );
    return data;
}

function ApplyColorCodingToTableCells(columnCount, colors) {
    for (var i = 0; i < columnCount; i++) {
        $('tr td:nth-child(' + (i + 2) + ')').addClass('border-' + colors[(i) % (colors.length)]);
    }
}

/* Timeplot loading extensions **********************************************************************/
/*
* Mimic the timeplot.loadText function
*/
Timeplot._Impl.prototype.loadArray = function(data, eventSource, filter) {
    if (this._active) {
        var tp = this;
        try {
            if (data.length > 0) { // added to check for empty result set
                eventSource.loadArray(data);
            }
            else {
                $('#my-timeplot').empty().html("<span class='error'>No data found</span>");
            }
        } catch (e) {
            SimileAjax.Debug.exception(e);
        } finally {
            tp.hideLoadingMessage();
        }
    }
}

/*
* Mimic the eventSource.loadText function
*/
Timeplot.DefaultEventSource.prototype.loadArray = function(data, filter) {
    if (data == null) {
        return;
    }
    this._events.maxValues = new Array();

    var dateTimeFormat = 'iso8601';
    var parseDateTimeFunction = this._events.getUnit().getParser(dateTimeFormat);

    var added = false;

    if (filter) {
        data = filter(data);
    }

    if (data) {
        for (var i = 0; i < data.length; i++) {
            var row = data[i];
            if (row.date) {
                var evt = new Timeplot.DefaultEventSource.NumericEvent(
                    parseDateTimeFunction(row.date),
                    row.value
                );
                this._events.add(evt);
                added = true;
            }
        }
    }

    if (added) {
        this._fire('onAddMany', []);
    }
}
